<template>
  <div className="container">
    <div className="head1">
      <div className="cs1">
        <div class="svgLogo1">
          <svg
            t="1664675084934"
            class="icon0"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4246"
            width="90"
            height="90"
          >
            <path
              d="M204.58281 67.475763 59.679642 340.902195 59.679642 67.475787 204.582845 67.475787 204.58281 67.475763zM115.347866 426.045338 234.876006 67.475763l150.635972 0L115.347866 426.045338zM211.135386 535.742771 425.626214 67.475763l207.128938 0L211.135386 535.742771zM211.135386 711.751373 686.789018 67.475763l286.537728-3.273523L211.135386 711.751373zM820.231782 956.525261l144.088576-274.246042 0 274.246061L820.231741 956.52528 820.231782 956.525261zM908.647014 597.141094 789.123994 956.525261 638.482885 956.525261 908.647014 597.141094zM812.864614 487.443763 597.548954 956.525261 390.425098 956.525261 812.864614 487.443763zM812.864614 311.435059 337.210982 956.525261l-286.537728 3.273523L812.864614 311.435059zM812.864614 311.435059"
              p-id="4247"
              fill="#d81e06"
            ></path>
          </svg>
        </div>
        <div className="text1">
          <h1>{{ "Hacker社区" }}</h1>
        </div>
      </div>
    </div>
    <div className="login">
      <div className="head">
        <div className="cs">
          <div class="svgLogo">
            <svg
              t="1664675084934"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4246"
              width="80"
              height="80"
            >
              <path
                d="M204.58281 67.475763 59.679642 340.902195 59.679642 67.475787 204.582845 67.475787 204.58281 67.475763zM115.347866 426.045338 234.876006 67.475763l150.635972 0L115.347866 426.045338zM211.135386 535.742771 425.626214 67.475763l207.128938 0L211.135386 535.742771zM211.135386 711.751373 686.789018 67.475763l286.537728-3.273523L211.135386 711.751373zM820.231782 956.525261l144.088576-274.246042 0 274.246061L820.231741 956.52528 820.231782 956.525261zM908.647014 597.141094 789.123994 956.525261 638.482885 956.525261 908.647014 597.141094zM812.864614 487.443763 597.548954 956.525261 390.425098 956.525261 812.864614 487.443763zM812.864614 311.435059 337.210982 956.525261l-286.537728 3.273523L812.864614 311.435059zM812.864614 311.435059"
                p-id="4247"
                fill="#d81e06"
              ></path>
            </svg>
          </div>
          <div className="text">
            <h2>{{ "Hacker社区" }}</h2>
          </div>
        </div>
      </div>
      <div className="formdata" v-if="showVerifyL">
        <div className="phone">
          <div className="cephone">
            <svg
              t="1664675278568"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5473"
              width="20"
              height="20"
            >
              <path
                d="M926.342144 849.004544c34.132992-59.40224 15.22688-105.025536-45.21984-150.674432-71.057408-53.664768-140.500992-89.761792-190.43328-31.939584 0 0-52.989952 63.081472-208.927744-84.535296-181.32992-172.8512-105.227264-234.155008-105.227264-234.155008 63.065088-63.401984 22.976512-110.700544-29.915136-182.334464-52.887552-71.632896-106.313728-94.30528-183.013376-32.697344C15.804416 251.394048 224.212992 530.164736 329.58464 638.56128l-0.004096 0.008192c0 0 160.234496 165.740544 261.066752 220.915712l53.941248 30.16192c77.366272 39.701504 164.267008 57.875456 225.446912 21.009408C870.035456 910.65856 899.526656 895.489024 926.342144 849.004544z"
                p-id="5474"
              ></path>
            </svg>
            <div className="ipt">
              <input type="text" v-model="cellphone" @blur="checkPhone" />
            </div>
          </div>
          <div className="psd">
            <svg
              t="1664675352522"
              class="icon1"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6413"
              width="20"
              height="20"
            >
              <path
                d="M385.150849 385.662338l-128.895105 0 0-150.377622q0-49.102897 19.436563-91.556444t53.706294-74.677323 80.815185-50.637363 101.786214-18.413586q49.102897 0 94.625375 18.413586t80.815185 50.637363 56.263736 74.677323 20.971029 91.556444l0 150.377622-123.78022 0 0-121.734266q0-64.447552-35.804196-99.74026t-97.182817-35.292707q-55.240759 0-88.999001 35.292707t-33.758242 99.74026l0 121.734266zM826.053946 447.040959q27.62038 0 47.568432 19.948052t19.948052 47.568432l0 317.122877q0 27.62038-9.718282 51.66034t-26.597403 41.942058-39.896104 28.131868-50.637363 10.22977l-516.603397 0q-27.62038 0-50.125874-10.22977t-38.361638-27.108891-24.551449-39.384615-8.695305-48.07992l0-324.283716q0-27.62038 19.436563-47.568432t47.056943-19.948052l61.378621 0 128.895105 0 255.744256 0 123.78022 0 61.378621 0z"
                p-id="6414"
              ></path>
            </svg>

            <div className="ipt2">
              <input type="text" v-model="password" />
            </div>
            <svg
              t="1664677453881"
              class="icon2"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="8610"
              width="20"
              height="20"
            >
              <path
                d="M253.6 679.2l109.6-109.6C356 552 352 532.8 352 512c0-88 72-160 160-160 20.8 0 40 4 57.6 11.2l82.4-82.4C607.2 264.8 560 256 512 256c-168 0-329.6 106.4-384 256 24 65.6 68.8 123.2 125.6 167.2z"
                p-id="8611"
              ></path>
              <path
                d="M416 512v4.8L516.8 416H512c-52.8 0-96 43.2-96 96zM770.4 344.8l163.2-163.2L888 136l-753.6 753.6 45.6 45.6 192.8-192.8A390.4 390.4 0 0 0 512 768c167.2 0 330.4-106.4 384.8-256-24-65.6-69.6-123.2-126.4-167.2zM512 672c-20 0-40-4-57.6-11.2l53.6-53.6h4.8c52.8 0 96-43.2 96-96v-4.8l53.6-53.6C668 472 672 492 672 512c0 88-72 160-160 160z"
                p-id="8612"
              ></path>
            </svg>
          </div>
        </div>
        <div className="verify">
          <svg
            t="1664675538046"
            class="icon3"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7502"
            width="20"
            height="20"
          >
            <path
              d="M895.744 273.28a59.2 59.2 0 0 0-46.72-51.936A1103.36 1103.36 0 0 1 697.92 186.56a561.28 561.28 0 0 1-135.008-78.912 61.76 61.76 0 0 0-72.16 0 354.112 354.112 0 0 1-136.032 78.4 507.264 507.264 0 0 1-146.944 36.32 55.04 55.04 0 0 0-46.208 51.936S160 404.64 160 519.36C160 727.04 405.056 928 527.616 928c122.528 0 330.24-141.76 363.456-405.504 8.32-155.776 2.56-248.704 2.56-248.704l2.112-0.544z m-133.44 160.416l-256 241.44c-11.52 10.976-29.12 12.704-42.56 4.16l-6.72-5.728-141.248-146.912a35.264 35.264 0 0 1 51.904-47.776l116.32 122.016 230.528-218.08a35.264 35.264 0 1 1 47.776 51.936v-1.056z"
              p-id="7503"
            ></path>
          </svg>
          <div className="ipt3">
            <input type="text" v-model="verifyCode" />
          </div>
          <div
            className="verifycode"
            ref="showVerify"
            @click="changeVerify"
          ></div>
        </div>
      </div>
      <div className="formdata1" v-if="showPhone">
        <div className="phone">
          <div className="cephone">
            <svg
              t="1664675278568"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5473"
              width="20"
              height="20"
            >
              <path
                d="M926.342144 849.004544c34.132992-59.40224 15.22688-105.025536-45.21984-150.674432-71.057408-53.664768-140.500992-89.761792-190.43328-31.939584 0 0-52.989952 63.081472-208.927744-84.535296-181.32992-172.8512-105.227264-234.155008-105.227264-234.155008 63.065088-63.401984 22.976512-110.700544-29.915136-182.334464-52.887552-71.632896-106.313728-94.30528-183.013376-32.697344C15.804416 251.394048 224.212992 530.164736 329.58464 638.56128l-0.004096 0.008192c0 0 160.234496 165.740544 261.066752 220.915712l53.941248 30.16192c77.366272 39.701504 164.267008 57.875456 225.446912 21.009408C870.035456 910.65856 899.526656 895.489024 926.342144 849.004544z"
                p-id="5474"
              ></path>
            </svg>
            <div className="ipt">
              <input type="text" v-model="cellphone" @blur="checkPhone" />
            </div>
          </div>
          <div className="psd">
            <svg
              t="1664789244376"
              class="icon1"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2117"
              width="20"
              height="20"
            >
              <path
                d="M874.666667 896H149.333333c-83.2 0-149.333333-66.133333-149.333333-149.333333V277.333333c0-83.2 66.133333-149.333333 149.333333-149.333333h725.333334c83.2 0 149.333333 66.133333 149.333333 149.333333v469.333334c0 83.2-66.133333 149.333333-149.333333 149.333333zM149.333333 213.333333c-36.266667 0-64 27.733333-64 64v469.333334c0 36.266667 27.733333 64 64 64h725.333334c36.266667 0 64-27.733333 64-64V277.333333c0-36.266667-27.733333-64-64-64H149.333333z"
                p-id="2118"
              ></path>
              <path
                d="M270.933333 597.333333h-10.666666c-44.8 0-81.066667-36.266667-81.066667-81.066666v-10.666667c0-44.8 36.266667-81.066667 81.066667-81.066667h10.666666c44.8 0 81.066667 36.266667 81.066667 81.066667v10.666667c0 44.8-36.266667 81.066667-81.066667 81.066666zM512 597.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333333 85.333333-38.4 85.333333-85.333333 85.333333zM757.333333 597.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333334 85.333333-38.4 85.333333-85.333334 85.333333z"
                p-id="2119"
              ></path>
            </svg>

            <div className="ipt2">
              <input type="text" v-model="password" />
            </div>
            <div className="sendMessage" v-show="show" @click="sendPhoneVerify">
              <el-button type="primary">{{ "发送验证码" }}</el-button>
            </div>
            <div className="sendMessage1" v-show="!show">
              <el-button type="primary">{{count+ '秒'}}</el-button>
            </div>
          </div>
        </div>
      </div>
      <div className="loginIn" v-if="showVerifyL">
        <div className="bnt">
          <svg
            t="1664679309546"
            class="icon4"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="11981"
            width="20"
            height="20"
          >
            <path
              d="M896 64H544c-17.7 0-32 14.3-32 32s14.3 32 32 32h352c35.3 0 64 28.7 64 64v640c0 35.3-28.7 64-64 64H544c-17.7 0-32 14.3-32 32s14.3 32 32 32h352c70.7 0 128-57.3 128-128V192c0-70.7-57.3-128-128-128z"
              p-id="11982"
            ></path>
            <path
              d="M821.3 535.7L458.9 863.3c-41.1 37.2-106.9 8-106.9-47.5V685c0-4.4-3.6-8-8-8H32c-17.7 0-32-14.3-32-32V379c0-17.7 14.3-32 32-32h312c4.4 0 8-3.6 8-8V208.1c0-55.5 65.8-84.7 106.9-47.5l362.4 327.6c14.1 12.8 14.1 34.8 0 47.5z"
              p-id="11983"
            ></path>
          </svg>
          <el-button type="primary" @click="sendInfoTologin">{{
            "登录"
          }}</el-button>
        </div>
      </div>
      <div className="loginIn1" v-if="showPhone">
        <div className="bnt">
          <svg
            t="1664679309546"
            class="icon4"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="11981"
            width="20"
            height="20"
          >
            <path
              d="M896 64H544c-17.7 0-32 14.3-32 32s14.3 32 32 32h352c35.3 0 64 28.7 64 64v640c0 35.3-28.7 64-64 64H544c-17.7 0-32 14.3-32 32s14.3 32 32 32h352c70.7 0 128-57.3 128-128V192c0-70.7-57.3-128-128-128z"
              p-id="11982"
            ></path>
            <path
              d="M821.3 535.7L458.9 863.3c-41.1 37.2-106.9 8-106.9-47.5V685c0-4.4-3.6-8-8-8H32c-17.7 0-32-14.3-32-32V379c0-17.7 14.3-32 32-32h312c4.4 0 8-3.6 8-8V208.1c0-55.5 65.8-84.7 106.9-47.5l362.4 327.6c14.1 12.8 14.1 34.8 0 47.5z"
              p-id="11983"
            ></path>
          </svg>
          <el-button type="primary" @click="loginByPhoneVerify">{{
            "登录"
          }}</el-button>
        </div>
      </div>

      <div className="ig" @click="changeLoginWay">
        <svg
          t="1664680723042"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="16217"
          width="30"
          height="30"
        >
          <path
            d="M456.032 737.056h544a24.032 24.032 0 0 0 16.96-40.96l-137.28-137.312a24 24 0 0 0-33.92 33.92l96.32 96.352H456a24 24 0 1 0 0 48zM1000 838.432h-544a24.032 24.032 0 0 0-16.96 40.96l137.28 137.312a24 24 0 0 0 33.92-33.92l-96.32-96.32h486.08a24 24 0 0 0 0-48z"
            fill="#3D71FA"
            p-id="16218"
          ></path>
          <path
            d="M510.304 0.256a287.776 287.776 0 0 0-128.864 545.184A514.912 514.912 0 0 0 0.096 997.28a24 24 0 0 0 21.92 25.888q1.024 0.096 2.016 0.096a24 24 0 0 0 23.904-22.016 466.432 466.432 0 0 1 462.368-424.992 288 288 0 1 0 0-576z m0 528a240 240 0 1 1 240-240 240.256 240.256 0 0 1-240 240z"
            fill="#272D43"
            p-id="16219"
          ></path>
        </svg>
      </div>
      <div className="register">
        <el-button type="primary"
          >{{ "去注册" }}
          <svg
            t="1664692561496"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="17946"
            width="14"
            height="14"
          >
            <path
              d="M407.104 939.52C394.528 952.544 377.248 959.904 359.168 960 318.368 958.304 286.592 924 288.032 883.2 287.936 862.08 296.288 841.824 311.2 826.88L623.904 512 311.2 197.12C296.288 182.176 287.936 161.92 288.032 140.8 286.592 100 318.368 65.696 359.168 64 377.248 64.096 394.528 71.456 407.104 84.48L776.96 455.68C807.68 486.944 807.68 537.056 776.96 568.32L407.104 939.52Z"
              p-id="17947"
            ></path>
          </svg>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { loginIn, takevrify } from "../../api/login/index";
const router = useRouter();
const store = useStore();
const cellphone = ref("");
const password = ref("");
const verifyCode = ref("");
const showVerifyL = ref(true);
const showPhone = ref(false);
let showVerify = ref(null);
const show = ref(true);
const timer = ref(null);
const count = ref(null);
let TIME_COUNT = ref(60);
const getVerify = async () => {
  const res = await takevrify();
  showVerify.value.innerHTML = res.data;
};
const changeVerify = () => {
  getVerify();
};
const reg =
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
const checkPhone = () => {
  if (!reg.test(cellphone.value)) {
    ElNotification.error({
      title: "Error",
      message: "手机格式错误！请检查手机号！",
      offset: 100,
    });
  }
};
const sendInfoTologin = async () => {
  const params = {
    cellphone: cellphone.value,
    password: password.value,
    verify: verifyCode.value,
  };
  const res = await loginIn(params);
  const {
    data: { data: data },
  } = res;
  if (data.status == 200) {
    ElNotification.success({
      title: "success",
      message: "登录成功",
      offset: 100,
    });
    cellphone.value = "";
    password.value = "";
    verifyCode.value = "";
    router.push({
      name: "Home",
      params: {},
    });
  } else if (data.status == 4013) {
    ElNotification.error({
      title: "Error",
      message: "验证码错误",
      offset: 100,
    });
  } else if (data.status == 4023) {
    ElNotification.error({
      title: "Error",
      message: "手机号错误！请检查手机号是否正确",
      offset: 100,
    });
  } else if (data.status == 4033) {
    ElNotification.error({
      title: "Error",
      message: "手机号未注册！",
      offset: 100,
    });
  } else if (data.status == 4033) {
    ElNotification.error({
      title: "Error",
      message: "密码错误！请重输！",
      offset: 100,
    });
  }
};
const changeLoginWay = () => {
  showVerifyL.value = !showVerifyL.value;
  showPhone.value = !showPhone.value;
};
const loginByPhoneVerify = ()=>{
  
}
const sendPhoneVerify = () => {
  if (!timer.value) {
    count.value = TIME_COUNT.value;
    show.value = false;
    timer.value = setInterval(() => {
      if (count.value > 0 && count.value <= TIME_COUNT.value) {
        count.value--;
      } else {
        show.value = true;
        clearInterval(timer.value);
        timer.value = null;
      }
    }, 1000);
  }
};
onMounted(() => {
  getVerify();
});
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  background-image: url(../../assets/test.png);
  background-color: #eee;
  background-repeat: no-repeat;
  background-size: cover;
  min-width: 1280px;
  .head1 {
    height: 80px;
    width: 100%;
    position: absolute;
    top: 40px;
    .cs1 {
      display: flex;
      .svgLogo {
        padding: 20px;
      }
    }
    .text1 {
      color: #fff;
      // opacity: 0.6;
    }
  }
  .login {
    height: 550px;
    width: 350px;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    position: absolute;
    right: 150px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 20px;
    .head {
      height: 80px;
      width: 100%;
      position: relative;
      margin-top: 40px;
      .cs {
        display: flex;
        margin-left: 40px;
      }
    }
    .formdata {
      width: 100%;
      height: 100%;
      position: relative;
      .phone {
        width: 310px;
        height: 250px;
        position: absolute;
        padding: 10px;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 10px;
        .cephone {
          position: relative;
          background-color: #fff;
          border-radius: 10px;
          svg {
            position: absolute;
            top: 5px;
            left: 8px;
          }
          .ipt {
            // width: 100%;
            height: 30px;
            border-radius: 10px;
            margin-left: 30px;
            input {
              border-radius: 10px;
              border: none;
              outline: none;
              width: 260px;
              height: 100%;
              padding: 0 !important;
            }
          }
        }
        .psd {
          width: 310px;
          position: absolute;
          top: 80px;
          left: 50%;
          transform: translateX(-50%);
          border-radius: 10px;
          background-color: #fff;
          border-radius: 10px;
          .icon1 {
            position: absolute;
            top: 5px;
            left: 8px;
          }
          .icon2 {
            position: absolute;
            top: 5px;
            right: 8px;
          }
          .ipt2 {
            height: 30px;
            border-radius: 10px;
            margin-left: 30px;
            input {
              border-radius: 10px;
              border: none;
              outline: none;
              width: 250px;
              height: 100%;
              padding: 0 !important;
            }
          }
        }
      }
      .verify {
        width: 105px;
        height: 29px;
        position: absolute;
        top: 200px;
        left: 20px;
        background-color: #fff;
        border-radius: 10px;

        .icon3 {
          position: absolute;
          top: 5px;
          left: 8px;
        }
        .ipt3 {
          width: 100px;
          height: 20px;
          input {
            width: 80px;
            height: 29px;
            margin-left: 31px;
            border: none;
            outline: none;
            padding: 0 !important;
            border-radius: 10px;
          }
        }
        .verifycode {
          width: 80px;
          height: 29px;
          position: absolute;
          left: 116px;
          top: 0;
          border-radius: 10px;
        }
      }
    }
    .formdata1 {
      width: 100%;
      height: 100%;
      position: relative;
      .phone {
        width: 310px;
        height: 250px;
        position: absolute;
        padding: 10px;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 10px;
        .cephone {
          position: relative;
          background-color: #fff;
          border-radius: 10px;
          svg {
            position: absolute;
            top: 5px;
            left: 8px;
          }
          .ipt {
            // width: 100%;
            height: 30px;
            border-radius: 10px;
            margin-left: 30px;
            input {
              border-radius: 10px;
              border: none;
              outline: none;
              width: 260px;
              height: 100%;
              padding: 0 !important;
            }
          }
        }
        .psd {
          width: 310px;
          position: absolute;
          top: 80px;
          left: 50%;
          transform: translateX(-50%);
          border-radius: 10px;
          background-color: #fff;
          border-radius: 10px;
          .icon1 {
            position: absolute;
            top: 5px;
            left: 8px;
          }
          .ipt2 {
            height: 30px;
            border-radius: 10px;
            margin-left: 30px;
            input {
              border-radius: 10px;
              border: none;
              outline: none;
              width: 250px;
              height: 100%;
              padding: 0 !important;
            }
          }
          .sendMessage {
            position: absolute;
            top: 0;
            left: 208px;
            border: none;
            outline: none;
            .el-button {
              height: 30px !important;
              border-bottom-left-radius: 0;
              border-top-left-radius: 0;
              border-bottom-right-radius: 10px;
              border-top-right-radius: 10px;
            }
          }
          .sendMessage1 {
            position: absolute;
            top: 0;
            left: 250px;
            border: none;
            outline: none;
            .el-button {
              width: 60px;
              height: 30px !important;
              border-bottom-left-radius: 0;
              border-top-left-radius: 0;
              border-bottom-right-radius: 10px;
              border-top-right-radius: 10px;
              font-weight: 900;
            }
          }
        }
      }
      .verify {
        width: 105px;
        height: 29px;
        position: absolute;
        top: 200px;
        left: 20px;
        background-color: #fff;
        border-radius: 10px;

        .icon3 {
          position: absolute;
          top: 5px;
          left: 8px;
        }
        .ipt3 {
          width: 100px;
          height: 20px;
          input {
            width: 80px;
            height: 29px;
            margin-left: 31px;
            border: none;
            outline: none;
            padding: 0 !important;
            border-radius: 10px;
          }
        }
        .verifycode {
          width: 80px;
          height: 29px;
          position: absolute;
          left: 116px;
          top: 0;
          border-radius: 10px;
        }
      }
    }
    .loginIn {
      width: 100%;
      height: 30px;
      position: absolute;
      top: 390px;

      .bnt {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        .icon4 {
          position: absolute;
          top: 5px;
          left: 111px;
        }
        .el-button {
          width: 310px;
          height: 30px;
          border: none;
          outline: none;
          background-color: #fff;
          color: #000;
          font-size: 16px;
          font-weight: 900;
          border-radius: 10px;
          line-height: 30px;
        }
      }
    }
    .loginIn1 {
      width: 100%;
      height: 30px;
      position: absolute;
      top: 320px;
      .bnt {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        .icon4 {
          position: absolute;
          top: 5px;
          left: 111px;
        }
        .el-button {
          width: 310px;
          height: 30px;
          border: none;
          outline: none;
          background-color: #fff;
          color: #000;
          font-size: 16px;
          font-weight: 900;
          border-radius: 10px;
          line-height: 30px;
        }
      }
    }
    .ig {
      position: absolute;
      top: 10px;
      right: 10px;
      &:hover {
        cursor: pointer;
      }
    }
    .register {
      position: absolute;
      top: 505px;
      left: 20px;
      .el-button {
        background-color: #fff;
        color: #000;
        border: none;
        outline: none;
        font-weight: 900;
      }
    }
  }
}
</style>
